<template>
  <div class="scroll-notice-container" :style="containerStyle">
    <div 
      class="notice-wrapper"
      ref="wrapper"
      :style="{ height: textHeight }"
    >
      <div 
        class="notice-content"
        :class="{ 'scroll-animation': shouldScroll }"
        :style="contentStyles"
        @animationiteration="handleAnimationIteration"
      >
        {{ displayContent }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'LiteScrollNotice',
  props: {
    content: {
      type: String,
      default: '精简版滚动通知'
    },
    fontSize: {
      type: Number,
      default: 14
    },
    maxWidth: {
      type: Number,
      default: 800
    }
  },
  data() {
    return {
      shouldScroll: true,
      contentWidth: 0,
      containerWidth: 0
    }
  },
  computed: {
    textHeight() {
      return `${this.fontSize * 2}px`
    },
    containerStyle() {
      return {
        width: '100%',
        maxWidth: `${this.maxWidth}px`,
        fontSize: `${this.fontSize}px`,
        margin: '0 auto 20px'
      }
    },
    displayContent() {
      return `${this.content}　　　　${this.content}`
    },
    contentStyles() {
      return {
        lineHeight: this.textHeight,
        animationDuration: '20s',
        paddingLeft: '20px',
        paddingRight: '20px'
      }
    }
  },
  mounted() {
    this.calculateWidth()
    window.addEventListener('resize', this.handleResize)
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize)
  },
  methods: {
    calculateWidth() {
      this.$nextTick(() => {
        const wrapper = this.$refs.wrapper
        if (!wrapper) return
        
        this.containerWidth = wrapper.clientWidth
        const tempSpan = document.createElement('span')
        tempSpan.style.cssText = `
          position: absolute;
          visibility: hidden;
          white-space: nowrap;
          font-size: ${this.fontSize}px;
        `
        tempSpan.textContent = this.content
        document.body.appendChild(tempSpan)
        
        this.contentWidth = tempSpan.offsetWidth
        document.body.removeChild(tempSpan)
      })
    },
    handleResize() {
      this.calculateWidth()
    },
    handleAnimationIteration() {
      // 动画重复时的回调
    }
  }
}
</script>

<style scoped>
.scroll-notice-container {
  position: relative;
  overflow: hidden;
  border-radius: 4px;
}

.notice-wrapper {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
}

.notice-content {
  display: inline-block;
  vertical-align: top;
  color: #666;
}

.scroll-animation {
  animation: scrolling linear infinite;
}

@keyframes scrolling {
  0% { transform: translateX(0) }
  100% { transform: translateX(-50%) }
}

/* 移动端适配 */
@media (max-width: 768px) {
  .scroll-notice-container {
    margin: 0 10px 10px;
  }
}
</style>
